<template>
	<view class="container">
		<view class="wrapper">
			<view class="welcome">云山供应链用户注册！</view>
			<!-- <view class="logo"><image src="../../static/logo1.png" mode="aspectFill"></image></view> -->
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input type="text" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile"
						@input="inputChange" />
				</view>
				<view class="input-item smscode">
					<text class="tit">手机验证码</text>
					<input type="text" :value="smscode" placeholder="请输入验证码" maxlength="20" data-key="smscode"
						@input="inputChange" />
					<button class="b-btn" @click="sendsmscode" :disabled="sendsmsing">{{sendtext}}</button>
				</view>
				<view class="input-item">
					<text class="tit">推荐人手机号码</text>
					<input type="number" :value="invitemobile" placeholder="请输入推荐人手机号码" maxlength="11"
						data-key="invitemobile" @input="inputChange" />
				</view>
			</view>
			<view class="confirm-text">
				<checkbox color="#fa436a" value="1" :checked="checked" @click="checkBox()" />
				<label @click="navTo('/pages/public/registerText')">查看注册协议</label>
			</view>
			<button class="confirm-btn" @click="toRegist" :disabled="registering">注册</button>
		</view>
		<view class="register-section">
			<!-- #ifdef H5 -->
			<text @click="toDownload" style="margin-right: 30upx;">APP下载</text>
			<!-- #endif -->
			已有账号?
			<text @click="$api.toUrl(`/pages/public/login`)">去登录</text>
		</view>
		
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				username: '',
				mobile: '',
				smscode: '',
				invitemobile: '',
				sendsmsing: false,
				sendtext: '发送验证码',
				
				checked: false,
				registering: false
			};
		},
		onLoad(options) {
			//接收传值,id
			let invitemobile = options.invitemobile;
			if(invitemobile && invitemobile != undefined){
				this.invitemobile = invitemobile;
			}
		},
		methods: {
			...mapMutations(['login']),
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			//多选框选择
			checkBox(){
				this.checked = !this.checked;
			},
			toDownload() {
				return window.location.href = "https://gyl.dl.lvaijiankang.com/";
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			//发送手机验证码
			sendsmscode() {
				this.sendsmsing = true;
				const {
					mobile
				} = this;
				/* 数据验证模块*/
				if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(mobile)) {
					this.$helper.toast('注册手机号不合法');
					this.sendsmsing = false;
					return;
				}
				
				const param = {};
				param.mobile = mobile;
				param.type = 'register';
				this.$http.request('Login', 'sendsmscode', 'POST', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							// '发送成功';
							this.countDown();
						}else{
							this.sendsmsing = false;
						}
					}else{
						this.sendsmsing = false;
					}
				});
			},
			countDown(){
				// 初始化定时器
				let t = null;
				// 倒计时1分钟
				let timer = 60;
				// 计时器清零
				clearInterval(t);
				// 按钮显示时间
				this.sendtext = `${timer} s`;
				t = setInterval(() => {
				// 当倒计时完时，显示重新发送,按钮开启
					if (timer == 0) {
						clearInterval(t);
						this.sendtext = "重新发送";
						this.sendsmsing = false;
						return;
					}
					// 实现倒计时效果
					timer--;
					this.sendtext = `${timer} s`;
				}, 1000);
			},
			//点击注册
			toRegist() {
				this.registering = true;
				const {
					mobile,
					smscode,
					invitemobile
				} = this;
				/* 数据验证模块*/
				if (!/(^1[2|3|4|5|6|7|8|9][0-9]{9}$)/.test(mobile)) {
					this.$helper.toast('注册手机号不合法');
					this.registering = false;
					return;
				}
				if (!smscode) {
					this.$helper.toast('验证码不能为空');
					this.registering = false;
					return;
				}
				if (invitemobile.length != 11) {
					this.$helper.toast('请获取推荐人手机号');
					this.registering = false;
					return;
				}
				if (!/(^1[2|3|4|5|6|7|8|9][0-9]{9}$)/.test(invitemobile)) {
					this.$helper.toast('推荐人手机号不合法');
					this.registering = false;
					return;
				}
				
				if(!this.checked){
					this.$helper.toast('请勾选注册协议');
					this.registering = false;
					return;
				}
				
				const param = {};
				param.mobile = mobile;
				param.smscode = smscode;
				param.invitemobile = invitemobile;
				
				this.$http.request('Login', 'register', 'POST', param, res => {
					console.log('Login/register', res);
					this.registering = false;
					if (res.status == 1) {
						if (res.data.error == 0) {

							uni.setStorageSync('token', res.data.data.token);
							uni.switchTab({
								url: '/pages/user/user'
							});
							
							// // #ifdef APP
							// uni.setStorageSync('token', res.data.data.token);
							// uni.switchTab({
							// 	url: '/pages/user/user'
							// });
							// // #endif
							
							// // #ifdef H5
							// return window.location.href = "https://gyl.dl.lvaijiankang.com/";
							// // #endif
							
							
						} else {
							this.$helper.toast(res.data.msg);
						}
					}
				});
			},
			
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.container {
		padding-top:200px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 20upx;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.left-top-sign {
		position: relative;
		left: 32upx;
		top: -92upx;

		image {
			width: 400upx;
			height: 133upx
		}
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: '';
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		height: 0upx;
		left: 50upx;
		top: -100upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
	}
	.logo{
		height: 280upx;
		text-align: center;
		
		image{
			width:280upx;
			height: 280upx;
		}
	}

	.input-content {
		padding: 0 60upx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 100upx;
		border-radius: 4px;
		margin-bottom: 30upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}
	
	.smscode{
		position:relative;
	}
	
	.b-btn {
		position: absolute;
		right: 0upx;
		top: 10upx;
		width: 200upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 26upx;
		color: #000000;
		border-radius: 10px;
		background: linear-gradient(left, #ffd465, #ff0000);
		z-index: 1;
	}
	
	.confirm-text {
		padding: 0 60upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		color: $font-color-spec;
		
		checkbox{
			transform:scale(0.7);
		}
		
	}
	
	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 10upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $font-sm + 2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}

	.register-section {
		position: fixed;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>
